/**
 * @module 组件模板
 */

$.extend($app, { 

    /**
     * @function 模块头
     * @param { string } title 标题
     * @param { string } sub 附属模板 
     */
    blockHead(title, sub,){

        return  `
            <div class='l-block-head'>
                <div class='l-title'>
                    <i class='l-icon'>
                    ${title}
                </div>
                <div class='l-sub'>
                ${sub}
                </div>
            </div>
        `
        
    },


     /**
     * @module 模块项
     * @param { string } label 标题
     * @param { string } msg 信息
     * @param { string } subClass 附属类名
     * 
     */ 
    CardItem(label, msg, subClass=''){
        return `
            <div class='l-card-item'>
                <div class="l-card-label">
                    ${label}
                </div>

                <div class='l-card-msg ${subClass}'>
                    ${msg}
                </div>
            </div>
        `

    },

    
    /**
     * @module 卡片容器
     * @param { string } tmp
     */

     Card(tmp, type){
         return `

            <div class="l-card">
                ${tmp}
            </div>

         `
     },


    /**
     * @function 来访人编辑弹窗配置
     * @param { string } name  来访人
     * @param { string } idCard 身份证
     * @param { string } phone 手机号
     * @summary 
     * 配置主要为了统一编辑弹窗数据在各处的使用, 无参数时， 
     * 提供纯粹的配置信息，所以配置内的value值不能作为显示或操作依靠
     */
    visitorConf(name, idCard, phone){

        // 校验函数
        
        return [

            {
                check(val){
                  return $app.judgeData(val)
                },
                label: '请输入姓名',
                className: 'l-visitor-name',
                value: $app.trim(name || ''),
                key: 'name',
                callback(){
                    $app.alert('来访人不能为空', '温馨提示', function () {
                        $('.l-visitor-name').focus();
                    });
                }
            },
            {
                check(val){
                    return $app.idCardCheck(val)  
                },
                label: '请输入身份证号码',
                className: 'l-visitor-id',
                value:  $app.trim(idCard || ''),
                key: 'idCard',
                callback(){
                    $app.alert('请输入正确的身份证格式', '温馨提示', function () {
                        $('.l-visitor-id').focus();
                    });
                }
            },
            {
                check(val){
                    return $app.telCheck(val)
                },
                label: '请输入手机号',
                className: 'l-visitor-phone',
                value: $app.trim(phone || ''),
                key: 'phone',
                callback(){
                    $app.alert('请输入正确的手机格式', '温馨提示', function () {
                        $('.l-visitor-phone').focus();
                    });
                }
            },

        ]
    },

    /**
     * @module 来访人编辑弹窗单一项
     * @param { string } label 标题
     * @param { string } value input 初始值
     */
    visitorItem(label='', value='', className=''){
        return `
           
        <div class='l-visibtor-item'>
           <input class='l-visibtor-item-input l-input ${className}' placeholder='${label}' value='${value}'>
         </div>
 
        `
     },



     /**
      * @module 来访人信息编辑
      * @param { string } name
      * @param { string } idCard
      * @param { string } phone
      */
     
    visitorEditPopup({name, idCard, phone}){
        const _conf = $app.visitorConf(name, idCard, phone)

        return `
           <div class='l-visitor-edit-form'>
             ${ _conf.reduce((acc, next) => acc + $app.visitorItem(next.label, next.value, next.className), '' ) }
           </div>
        `
        
    },
  
    /**
     * @module 同行人编辑控制按钮
     *
     */

    visitorEditControl(){
      return `
        <div class='l-visitor-editor-control'>
        
        <button class='l-visitor-btn-del l-btn l-danger-bg l-btn-long l-w-color' onclick='$app.visitorDel()'> 删除 </button>
        <button class='l-visitor-btn-enter l-btn l-main-bg l-btn-long l-w-color' onclick='$app.visitorEnter()' > 确认 </button>

        </div>
      `
    },

    /**
     * @function 来访人新增
     */

    visitorCreate(){

        return `
        <div class='l-visitor-editor-control'>
            <button class='l-visitor-btn-enter l-btn l-main-bg l-btn-long l-w-color' onclick='$app.qxT()' > 确认 </button>
        </div>
        `
        
    },
    
    
  
    /**
     * @module 同行人编辑弹窗容器
     * @param { string } inner 信息内容
     * @param { string } control 按钮控制模板
     */
    visitorContainer(inner, control){
        
        return `
           <div class='l-visitor-edit-popup'>
             ${inner}
             ${control}
           </div>
        `
    },


    /**
     * @function 图片组件
     * @param { string } icon icon类型 
     */
    icon(icon=''){
        return `<i class='iconfont ${icon}'></i>`
    },


    /**
     * @function 卡片信息项
     * @param { string } icon 
     * @param { string } msg 
     */
    searchListItem(icon, msg){

        return `
            <div class='l-search-list-item'>
                ${icon ? $app.icon(icon) : ''}
                ${msg}
            </div>
        `

    },


    /**
     * @module 来访查询列表项
     * @param { string } id 身份证
     * @param { string } name 来访人
     * @param { string } phone 电话
     * @param { string } date 来访日期
     * @param { string } compony 来访单位
     * @param { string } status 状态名称
     * @param { string } statusColor 状态样色
     */

    searchListCard({ id, name, phone, date, compony, status, statusColor }){

        const _conf = [

            {
                icon: 'iconuser1',
                msg: name
            },
            {
                icon: 'iconphone',
                msg: phone
            },
            {
                icon: '',
                msg: date
            },
            {
                icon: 'iconicon-',
                msg: compony
            }
            
        ]

        const infoList = _conf.reduce((acc, next) => acc + $app.searchListItem(next.icon, next.msg) , '')
        const tmp = `

            <div class='l-search-list-card' data-id=${id}>
                <div class='l-search-list-card-info'>
                    ${infoList}
                </div>
                <div class='l-search-list-card-sub'>

                    <div class='l-search-sub-item'>
                        ${$app.icon('iconright')}
                    </div>

                    <div class='l-search-sub-item'  style='color: ${statusColor}'>
                        ${status}
                    </div>
                
                </div>
            </div>
        `
        return $app.Card(tmp)
         
    }
    
    
})